<template>
  <div id="app" :data-theme="currentTheme">
    <el-config-provider :locale="currentTheme === 'dark' ? zhCn : undefined">
      <header>
        <nav>
          <router-link to="/">首页</router-link>
          <router-link to="/works">作品列表</router-link>
          <router-link to="/about">关于我们</router-link>
        </nav>
        <div class="theme-toggle-container">
          <el-switch
            v-model="isDarkTheme"
            inline-prompt
            active-icon="Sunny"
            inactive-icon="Moon"
            @change="toggleTheme"
            style="--el-switch-on-color: #42b983; --el-switch-off-color: #333333"
          />
        </div>
      </header>
      <main>
        <router-view />
      </main>
      <footer>
        <p>&copy; 2023 文学鉴赏平台. All rights reserved.</p>
      </footer>
    </el-config-provider>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const isDarkTheme = ref(false)
const currentTheme = ref('light')

const toggleTheme = () => {
  currentTheme.value = currentTheme.value === 'dark' ? 'light' : 'dark'
  isDarkTheme.value = currentTheme.value === 'dark'
  localStorage.setItem('theme', currentTheme.value)
  // 更新 HTML 元素的 data-theme 属性
  document.documentElement.setAttribute('data-theme', currentTheme.value)
}

onMounted(() => {
  const savedTheme = localStorage.getItem('theme')
  if (savedTheme) {
    currentTheme.value = savedTheme
    isDarkTheme.value = savedTheme === 'dark'
  } else {
    // 默认使用亮色主题
    currentTheme.value = 'light'
    isDarkTheme.value = false
  }
  // 设置 HTML 元素的 data-theme 属性
  document.documentElement.setAttribute('data-theme', currentTheme.value)
})
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: var(--text-color);
  margin-top: 60px;
  min-height: 100vh;
}

header {
  position: relative;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: var(--text-color);
  margin: 0 15px;
}

nav a.router-link-exact-active {
  color: #42b983;
}

.theme-toggle-container {
  position: absolute;
  top: 20px;
  right: 20px;
}

footer {
  margin-top: auto;
  padding: 20px;
}
</style>